<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码生成</title>
<style>
input[readonly], .form-control[readonly] {
	background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function getParam(key){
	//构造一个含有目标参数的正则表达式对象
	var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	//匹配目标参数
	var r = window.location.search.substr(1).match(reg);
	//返回参数
	if (r != null) {
		return unescape(r[2]);
	} else {
		return null;
	}
}
var ctx = getParam("ctx");
/* document.write('<link rel="stylesheet" type="text/css"	href="/'+ctx+'/lib/bootstrap3.3.7/css/bootstrap.min.css" />'); */
</script>
<link rel="stylesheet" type="text/css"
	href="lib/bootstrap3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="lib/jquery-confirm-v3.3.4/jquery-confirm.min.css" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/bootstrap3.3.7/js/bootstrap.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery-confirm-v3.3.4/jquery-confirm.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-pager.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jq-extends.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script src="js/nojs.js" type="text/javascript" charset="utf-8"></script>

<script>
			var listUrl = "generator/list";
			var detailUrl = "generator/table/detail?id=";
			var exportUrl = "generator/exportByConfig";
			var exportsUrl = "generator/exportTables";
			
			//弹出的要导出的form
			var template;
			$(function(){
				template = $("#template").html();
				$("#template").html('');
				
				// 分页插件
				$("form ul.pagination").pager({onlyPage:true});
				//加载数据
				query();
				
				//查询
				$("button.query", "body").on("click", function(){
					query($("#toolbar").serialize());
				});
				//重置
				$("button.reset", "body").on("click", function(){
					$(":input, #toolbar").val("");
					query();
				});
				
				//打开导出页面
				$("tbody").on("click", "tr button.export", function(){
					var tableName = $("input", $(this)).val();
					openExport(tableName);
				});
				
				//点击页码的跳转
				$("body").on("click","ul.pagination li:not('.disabled,active')", function(){
					var page = $(this).data("page_forward") || 1;
					var size = $("select[name='size']").val()||10;
					var pageParam = $.param({page: page, size: size});
					query(pageParam +"&" + $("#toolbar").serialize());
				});
				//点击跳转到某页的按钮 
				$("body").on("click",".pager-form button", function(){
					var page =$(".pager-form [name='page']").val() || 1;
					var size = $("select[name='size']").val()||10;
					var pageParam = $.param({page: page, size: size});
					query(pageParam +"&" + $("#toolbar").serialize());
				});
				

				
				/*********************导出选中的表 start**************************************/
				$("[data-checkbox-required='ids']").on("click", function(){
					$(this).prop("disabled", true);
					var $ids = 	$("#tbody input[name='tableName']").filter(":checked");
					if($ids.size() == 0){
						return;
					}
					
					//弹窗的一些属性
					var comfirmOpt = {
							title: '填写导出的包名和模块',
							columnClass: 'col-md-6 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
							onContentReady: function() {
								// after dialog conent ready  load form data
								var $form = $("form", this.$content);
								$form.append($ids.clone(true).hide());
								$ids.prop("checked", false);
								$form.attr("action", exportsUrl);
							}
					};
					//提交动作
					var submotFn = function() {
						var $form = $("form", this.$content);
						var packageName = $("#packageName", $form).val();
						var moduleName = $("#moduleName", $form).val();
						if(!packageName || !moduleName) {
							$.alert({title:'提示',  content:'请输入包名和模块名'});
							return false;
						}
						$form.submit();
					}
					var content = `
						<form class="form-horizontal" role="form " method="post" action="">
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">包名</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="packageName" name="packageName" value="" data-rule-required="true" placeholder="请输入包名"
								 autocomplete="off" />
							</div>
							<div class="col-sm-3  help-inline form-control-static"></div>
						</div>
						
						<div class="form-group">
							<label for="code" class="col-sm-2 control-label">模块*</label>
							<div class="col-sm-7 ">
								<input type="text" class="form-control" id="moduleName" name="moduleName" value=""  
								  autocomplete="off" />
							</div>
							<div class="col-sm-3  help-inline form-control-static"></div>
						</div>
					</form>
					`;
					confirm(content,submotFn, comfirmOpt);
				});
			});
			/*********************导出选中的表 end**************************************/
			//查询列表数据
			function query(data){
				data = data || "";
				var url =  listUrl;
				$.ajax(url,{
					type: 'get',
					dataType: 'json',
					data: data
				}).done(function(res){
					if(res.code != 0)  {
						alert(res.msg);
						return;
					}
					initPage(res.data);
					initTbody(res.data.datas);
				}).fail(function(jqXHR, textStatus, errorMsg){
					console.error('发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg);
					$.alert("请求失败:" + jqXHR.status + ":" + errorMsg, "请求失败");
				}); 
			}
			var trTemp = `
				<tr>
					<td class="center"><input type="checkbox" name="tableName" data-leader="ids"></td>
					<td class="text-left" name='tableName'></td>
					<td name='comments'></td>
					<td name='createTime'></td>
					<td name='engine'></td>
					<td>
						<button class="btn btn-xs btn-success export" data-toggle="tooltip" title="导出"
										<i class="glyphicon glyphicon-fire"></i> 导出
										<input name='tableName' type="hidden"/>
									</button>
					</td>
				</tr>
			`;
			//初始化表格内容
			function initTbody(datas){
				var $tbody = $("#tbody").empty();
				if(!datas || !Array.isArray(datas)) return;
				datas.forEach(function(row){
					$(trTemp).clone().bindData(row).appendTo($tbody);
					
				});
				$nojs.checkboxBinding.init();
				
			}
			// 初始化 页码
			function initPage(data){
				$("form.pager-form").bindData(data);
				$(".pagination").data("size", data.size).data("page", data.page).data("total", data.total);
				$("form ul.pagination").pager({onlyPage:true});
			}
			
			//打开配置页面
			function openExport(tableName){
				if(!tableName) return;
				var url = detailUrl + tableName;
				//把template 清空 重新写入数据
				$("#template").html(template);
				$.ajax(url,{
					type: 'get',
					async: false,
					dataType: 'json'},
				).done(function(result){
					new Vue({
						el: '#exportForm',
						data: result,
						mounted: function() {
							//vue 加载完数据之后执行的函数
							dialogExport();
							
							
						}
					}); 
					
					function dialogExport(){
					
						//弹窗的一些属性
						var comfirmOpt = {
								title: tableName + '表导出配置',
								columnClass: 'col-md-6 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
								onContentReady: function() {
									// after dialog conent ready  load form data
									var $form = $("#exportForm", this.$content);
									 $('#tableName', $form).val(tableName);
									 $nojs.checkboxBinding.init();
								}
						};
						//提交动作
						var submotFn = function() {
							debugger;
							var $form = $("form", this.$content);
							console.info(this.$content.prop("outerHTML"));
							console.info($form.prop("outerHTML"))
							var packageName = $("#packageName", $form).val();
							var moduleName = $("#moduleName", $form).val();
							if(!packageName || !moduleName) {
								$.alert({title:'提示',  content:'请输入包名和模块名'});
								return false;
							}
							$form.attr("action", exportUrl);
							$form.submit();
						}
					confirm($("#template").html(), submotFn, comfirmOpt);
					}
					
					
				}).fail(function(jqXHR, textStatus, errorMsg){
					console.error('发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg);
					$.alert('发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg, "请求失败");
				});
			}
			
			function confirm(content, successFn, opts) {
				opts = opts || {};
				var options = {
					title: '确定',
					content: content,
					titleClass: '',
					type: 'green', //'default'' 'blue, green, red, orange, purple & dark'
					theme: 'bootstrap', //对话框的颜色主题，：'white', 'black', 'material' , 'bootstrap'
					buttons: {
						confirm: {
							text: '确定',
							btnClass: 'btn-red',
							action: successFn || $.noop()
						},
						cancle: {
							text: '取消',
							btnClass: 'btn-info',
							action: function() {}
						}
					}
				};
				$.confirm($.extend(true,{},  options, opts));
			}
		</script>

</head>
<body>
	<div class="container container-fluid">
		<div class=" clearfix" style="margin-bottom: 10px;"></div>
		<!-- 清除浮动 -->
		<div class="row">
			<div class="col-md-12 col-lg-12 col-sm-12">
				<form id="toolbar" class="form-inline nocol">
				<!-- 操作按钮 -->
				<div class="form-group btn-group btn-group-sm">
					<button type="button" class="btn btn-sm btn-success" 
						data-checkbox-required="ids" data-title="导出" > 
						<i class="glyphicon glyphicon-export"></i> 导出
					</button>
				</div> 
					<!-- 查询条件 -->
					<div class="form-group">
						<label class="sr-only" for="lookup-username">表名</label> <input
							type="text" class="form-control input-sm" id="lookup-name"
							name="tableName" placeholder="请输入表名" autocomplete="off" />
					</div>
					<div class="form-group">
						<label class="sr-only" for="lookup-username">备注</label> <input
							type="text" class="form-control input-sm" id="lookup-comments"
							name="comments" value="" placeholder="请输入表的备注" autocomplete="off" />
					</div>

					<div class="form-group">
						<label class="sr-only" for="lookup-opened">数据引擎</label> <select
							class="form-control input-sm" id="lookup-opened" name="engine"
							data-value="">
							<option value="">--请选择引擎--</option>
							<option value="InnoDB">InnoDB</option>
							<option value="MyISAM">MyISAM</option>
						</select>
					</div>

					<div class="form-group ">
						<button type="button" class="btn btn-primary btn-sm query">
							<i class="glyphicon glyphicon-search"></i> 查询
						</button>
						<button type="button" class="btn btn-info btn-sm reset">
							<i class="glyphicon glyphicon-refresh"></i> 重置
						</button>
					</div>

				</form>
				<div class="clearfix" style="margin-bottom: 10px;"></div>
				<!-- 清除浮动 -->
				<table class="table table-hover table-bordered">
					<thead>
						<tr >
							<th class="text-center"><input type="checkbox" data-member="ids"></th>
							<th class="text-center">表名称</th>
							<th class="text-center">表备注</th>
							<th class="text-center">创建时间</th>
							<th class="text-center">引擎</th>
							<th class="text-center text-info">操作</th>
						</tr>
					</thead>
					<tbody align="center" id="tbody">

					</tbody>
				</table>

				<!--页码相关-->
				<form class="row pager-form" role="form" method="post">
					<div class="row">
						<div class="col-md-6 col-lg-6 col-xs-6 col-sm-6">
							<div class="pagination input-group-xs">
								<span>共<span class="total">100</span>条记录，每页显示 <select
									class=" input-xs" name="size" data-value="10">
										<option value="10">10</option>
										<option value="12">12</option>
										<option value="20">20</option>
										<option value="30">30</option>
										<option value="40">40</option>
										<option value="50">50</option>
										<option value="60">60</option>
										<option value="70">100</option>
								</select>条，
								</span> <span><button type="button" class="btn btn-xs">跳转到</button>第<input
									type="text"
									style="width: 2.5em; height: 1.4em; text-align: center"
									name="page" value="1" />页</span>
							</div>
						</div>
						<div class="col-md-6 col-lg-6 col-xs-6 col-sm-6">
							<ul class="pagination pagination-sm pager-list" data-size="10"
								data-page="1" data-total="0">
							</ul>
						</div>
					</div>
				</form>
			</div>
		</div>
		
		
		
		<!--  **********************************************************  -->
		 <div id="template" class="hidden">
			<form class="form-horizontal validate" id="exportForm" 	role="form vue-form" method="post">
				<div class="form-group">
					<label for="tableName" class="col-sm-2 control-label">表名</label>
					<div class="col-sm-10 ">
						<input type="text" id="tableName" class="form-control" name="tableName" />
							
					</div>
				</div>
				<div class="form-group">
					<label for="packageName" class="col-sm-2 control-label">主包</label>
					<div class="col-sm-10 ">
						<input type="text" class="form-control" id="packageName" name="packageName"  autocomplete="off" />
							
					</div>
				</div>
				<div class="form-group">
					<label for="moduleName" class="col-sm-2 control-label">模块</label>
					<div class="col-sm-10 ">
						<input type="text" class="form-control" id="moduleName"  name="moduleName" autocomplete="off" />
							
					</div>
				</div>
				<hr />
				<div class="form-group">
					 <div class="col-sm-12 "> 
						<table class="table table-striped table-bordered table-hover " style="word-break:break-all; word-wrap:break-all;">
							<caption>
								<strong>选择列表页需要展示的字段:</stong>
							</caption>
							<thead>
								<tr class="center">
									<th><input type="checkbox" data-member="c_ids"></th>
									<th>字段名</th>
									<th>属性名</th>
									<th>属性类型</th>
									<th>字段备注</th>
									<th>查询方式</th>
								</tr>
							</thead>
							<tbody align="center">
								<tr v-for="(column, index) in data.columns"
									v-if="!column.entityIgnore">
									<td> <input type="checkbox" value="true"
										data-leader="c_ids" :name="'columns['+index+'].show'" /> <input
										type="hidden" :value="column.columnName"
										:name="'columns['+index+'].columnName'" /></td>
									<td>{{column.columnName }}</td>
									<td>{{column.attrname }}</td>
									<td>{{column.attrType }}</td>
									<td>{{column.comments }}</td>

									<td><select v-if="column.attrType=='String'"
										class="selectpicker" :name="'columns['+index+'].condition'">
											<option value="0">等于</option>
											<option value="1" selected="selected">like</option>
									</select> <select v-else class="selectpicker"
										:name="'columns['+index+'].condition'">
											<option value="0" selected="selected">等于</option>
											<option value="1">like</option>
									</select></td>
								</tr>
							</tbody>
						</table>
					</div> 
				 </div>
			</form>
		
		</div>
	</div>
</body>
</html>
